<template>
	<view class="big-box flex-col align-center">
		<top-navigation :isBack="true" bgColor="rgb(22, 22, 30)" isFix isShow>
			<view slot='center-slot' class="left-slot">
				<x-btn @tap="tips">减肥食谱目录</x-btn>
			</view>
		</top-navigation>
		<x-btn border='none'>成人肥胖食养指南（2024 年版）</x-btn>
		<x-btn :padd="0" border='none'><text style="font-size: 20rpx;">国家卫生健康委办公厅转载</text></x-btn>
		<view class="tree-box">
			<view class="tree" v-for="v,k in list" :key="k">
				<view class="" @tap.stop="toggle(v,k)"
					style="display: flex;align-items: center;height: 80rpx;overflow: hidden;position: relative;z-index: 1;background: #e3e3e3;">
					<view class="arrow-up" :style="{transform:`rotate(${treeCollpe.includes(k)?'180deg':'0deg'})`}">
						<u-icon name="arrow-up"></u-icon>
					</view>

					<x-btn>{{v.name}}</x-btn>
				</view>
				<u-transition :show="v.subgroups.length&&treeCollpe.includes(k)">
					<view class="" v-if="v.subgroups.length&&treeCollpe.includes(k)"
						:style="{'zIndex':999-k,'position': 'relative'}" v-for="v1,k1 in v.subgroups" :key="k1">
						<view class="tree-item" @tap.stop="toggle1(v1,k1,k)">
							<view class="arrow-up"
								:style="{transform:`rotate(${treeCollpe1[k].includes(k1)?'180deg':'0deg'})`}">
								<u-icon name="arrow-up"></u-icon>
							</view>
							{{v1.name}}
						</view>

						<u-transition :show="v1.contacts.length&&treeCollpe1[k].includes(k1)">
							<view class="name" v-if="v1.contacts.length&&treeCollpe1[k].includes(k1)"
								v-for="v2,k2 in v1.contacts" :key="k2" :style="{'zIndex':999-k1,'position': 'relative'}"
								@tap="openDocuments(v2)">
								<view class="tree-item" style="padding-left: 40rpx;">
									<view class="arrow-up">
										<u-avatar :text="v2.name.substring(0, 1)"></u-avatar>
									</view>
									{{v2.name}}
								</view>

							</view>
						</u-transition>
					</view>
				</u-transition>


			</view>
		</view>
		<!-- {{list}} -->
	</view>
</template>

<script>
	export default {

		data() {
			return {
				list: [],
				treeCollpe: [0],
				treeCollpe1: {},
				isAuto: true,
				loading:false,
			}
		},
		computed: {},

		methods: {
			tips() {
				// readNovels
				uni.showToast({
					title: '消耗1.4卡路里',
					icon: 'none'
				})
			},
			openDocuments(e) {
				if(this.loading) return
				this.loading = true
				console.log(e.url);
				// 点击事件
				let file = decodeURIComponent(e.url); // 解码(注意:涉及到文件名中有中文需要转码)
				file = this.getFilePathName(file); // 将文件路径过滤，格式为【文件名+.后缀名】
				// 加载状态
				uni.showLoading({
					title: '文件打开中',
					mask: true
				});
				let _this = this;
				// 预览网络文档
				wx.downloadFile({
					url: e.url, // 文件的本身url
					filePath: wx.env.USER_DATA_PATH + '/' + file, // 本地自定义的文件名
					success: function(res) {
						let filePath = res.filePath; // 微信临时文件路径(这里要使用自定义的名字文件名,否则打开的文件名是乱码)
						wx.openDocument({
							filePath: filePath,
							showMenu: true, // 是否显示右上角菜单按钮 默认为false(看自身需求，可要可不要。后期涉及到右上角分享功能)
							success: function() {
								_this.loading = false
								uni.showToast({
									title: '打开文件成功',
									icon: 'none'
								})
							},
							fail: function() {
								_this.loading = false
								uni.showToast({
									title: '打开文件失败，请稍后重试',
									icon: 'none'
								})
								
							}
						});
						uni.hideLoading();
					},
					fail: function() {
						_this.loading = false
						uni.showToast({
							title: '打开文件失败，请稍后重试',
							icon: 'none'
						})
						uni.hideLoading();
					}
				});

			},
			// 文件路径过滤【文件名+.后缀名】
			// 例如：哈哈.pdf
			getFilePathName(path) {
				let pos1 = path.lastIndexOf('/');
				let pos2 = path.lastIndexOf('\\');
				let position = Math.max(pos1, pos2);
				if (position < 0)
					return path;
				else
					return path.substring(position + 1);
			},

			toggle(v, k) {

				if (this.isAuto) {
					if (this.treeCollpe.includes(k)) {
						this.treeCollpe = []
					} else {
						this.treeCollpe = [k]
						// this.treeCollpe =[...new Set(...this.treeCollpe)]
					}
				} else {
					if (this.treeCollpe.includes(k)) {
						this.treeCollpe = this.treeCollpe.filter(e => e != k)
					} else {
						this.treeCollpe.push(k)
						// this.treeCollpe =[...new Set(...this.treeCollpe)]
					}
				}

			},
			toggle1(v1, k1, k) {
				console.log('触发子', k);
				console.log('treeCollpe', this.treeCollpe1[k]);
				if (this.isAuto) {
					if (this.treeCollpe1[k].includes(k1)) {
						this.treeCollpe1[k] = []
						console.log('this.treeCollpe1[k]', this.treeCollpe1[k]);
					} else {
						this.treeCollpe1[k] = [k1]
						// this.treeCollpe1 =[...new Set(this.treeCollpe1)]
					}
				} else {
					if (this.treeCollpe1[k].includes(k1)) {
						this.treeCollpe1[k] = this.treeCollpe1[k].filter(e => e != k1)
						console.log('this.treeCollpe1[k]', this.treeCollpe1[k]);
					} else {
						this.treeCollpe1[k].push(k1)
						// this.treeCollpe1 =[...new Set(this.treeCollpe1)]
					}
				}

			}
		},
		onLoad() {
			this.list = [{
					name: '不同地区食谱示例',
					count: 69,
					subgroups: [{
							name: '东北地区',
							count: 4,
							contacts: [{
								name: '四季食谱',
								avatar: '/static/avatar.png',
								url: 'https://mp-1cc28b7f-f35a-4955-8572-8c522cebf127.cdn.bspapp.com/pdf/dongbei.pdf'
							}]
						},

					]
				},

			]
			this.list.map((v, k) => {
				this.$set(this.treeCollpe1, k, [])
			})
		},
	}
</script>

<style lang="scss" scoped>
	.big-box {
		width: 100vw;
		min-height: 100vh;
		background: #e3e3e3;
		color: #000;
		font-weight: bold;

		.tree-box {
			width: 100vw;
			// height: 80rpx;
		}

		.tree {
			padding: 0 20rpx;
			min-height: 80rpx;
			transition: height .6s;
			// border-bottom: 1rpx solid #36a200;

			.arrow-up {
				margin-right: 10rpx;
				transition: all .6s;
			}

			.tree-item-box {}

			.tree-item {
				padding-left: 20rpx;
				display: flex;
				align-items: center;
				height: 80rpx;
				background: #e3e3e3;
				border-bottom: 1rpx solid #CCC;
			}
		}
	}
</style>